<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<link rel="stylesheet" type="text/css" href="../c/suxiangw.css" />
	<link rel="stylesheet" type="text/css" href="../c/article.css" />
	<link rel="stylesheet" type="text/css" href="../c/animate.css" />
	<style>
		.sx-list .content {
			padding-bottom: 0.4rem;
		}
		.sx-list .content img {
			background: none;
			margin: 0 auto;
			text-align: center;
		}
	</style>
</head>

<body>
	<script id="sx-view-list" type="text/x-dot-template">
		<div class="aui-card-list {{? it.channel == 2}}video{{?}}" id="id{{= it.id}}">
			<div class="aui-card-list-header aui-card-list-user" tapmode onclick="_u({{= it.uid }})">
				<div class="aui-card-list-user-avatar">
					<img suxiangw-src="{{= it.user.img ? _img(it.user.img,60,60) : '../i///qiniu.live.kxg99.com../i/bo/touxiang.png' }}" src='../i/touxiang.png' class="aui-img-round" />
				</div>
				<div class="aui-card-list-user-name">
					{{= it.user.username}}
				</div>
				<div class="aui-card-list-user-info">{{= it.time}}</div>
			</div>
			{{? it.content}}
			<div class="content">{{= it.content}}</div>{{?}}
			{{? it.channel == 2}}
			<div class="aui-card-list-content-padded">
				<div class="aui-row">
					<div class="aui-col-xs-12">
						<img id="video_img" src='../i/loading_a.png'  />
					</div>
					<div class="em"><em></em></div>
				</div>
			</div>
			{{?? it.channel == 1}}
			<div class="content">
				{{ for(var i=0,images=it.data; i< images.length; i++) { }}
				<img src="../i/loading_a.png" class="aui-margin-b-15"  tapmode onclick="img({{= i}})" suxiangw-src="{{= _img(images[i],api.winWidth,-1) }}" />
				{{ } }}
			</div>
			{{??}}
			<div class="content">{{= it.data}}</div>
			{{?}}
			<div class="foot">
				<div class="l1"><img src="../i/a_click.png"><p>{{= it.click}}</p></div>
				<div class="l2 zan" tapmode onclick="_zan({{= it.id}},'','','article')"><img src="../i/a_zan{{= it.user_zan?'-s':''}}.png"><p>{{= it.zan_num}}</p></div>
				<div class="l3" tapmode onclick="gundong();"><img src="../i/a_ping.png"><p>{{= it.ping_num}}</p></div>
				<div class="l4" tapmode onclick="_fenxiang({id:{{= it.id}},_t:1,_name:'article',title:'{{= it.content}}',content:'{{= it.content}}'})"><img  style="width:1.2rem;" src="../i/a_fx.png"></div>
			</div>
		</div>
	</script>
	<section class="sx-list" id="sx-view-view">
	<div class="loading_by">
		<div class="a">
			<div class="a1"><span></span><span></span></div>
			<div class="a2" style="height:10rem;"></div>
		</div>
	</section>
	<!-- 评论开始 -->
	<div class="sx-ping-list" id="sx-view"></div>
	<script id="sx-list" type="text/x-dot-template">
		{{ for(var i=0,it=it.data; i < it.length; i++) { }}
		<div class="content" id="ping-id-{{= it[i].id}}" {{? _getPrefs('ping'+ it[i].id)}}style="display: none;"{{?}}>
			<img class="userimg" suxiangw-src="{{= it[i].user.img ? _img(it[i].user.img,'60',60) : '../i///qiniu.test.live.hqtuite.cn../i/ibo/touxiang.png'}}" src="../i/touxiang.png" tapmode onclick="_u({{= it[i].uid}})" />
			<div class="username" tapmode onclick="_u({{= it[i].uid}})">{{= it[i].user.username}}</div>
			<div class="text" tapmode onclick="setPlaceholder({{= it[i].id}},'{{= it[i].user.username}}');">
				<div class="user-text"><span class="_text">{{= _text(it[i].content) }}</span><span>{{= it[i].time}}</span></div>
			</div>
			<div class="zan" tapmode onclick="_zan({{= it[i].id}},1,'','article')" />
				<img src="../i/zan{{= it[i].user_zan?'-s':''}}.png" />
				<p>{{= it[i].zan_num ? it[i].zan_num : ''}}</p>
			</div>
			{{? _getPrefs('_config').config.app == 1}}
			<div class="jubao" tapmode onclick="jubao({{= it[i].id}})">举报</div>
			{{?}}
		</div>
		<!-- 回复开始 -->
		<div class="content-huifu" id="huifu-{{= it[i].id}}" d ata-page="1" {{? !it[i].huifu_num}}style="display: none;"{{?}}>
			<div id="sx-view-huifu-{{= it[i].id}}"></div>
			<div class="huifu_t l" tapmode onclick="ping_huifu_ajax({{= it[i].id}})">
				<span></span>展开<b data-num="{{= it[i].huifu_num}}">{{= it[i].huifu_num}}</b>条回复<i></i>
			</div>
			<div class="huifu_t r" style="display: none;" tapmode onclick="ping_huifu_show({{= it[i].id}},true);">
				<span></span>收起<i style="transform:rotate(180deg);"></i>
			</div>
			<div class="huifu_t b " style="display: none;margin-left:-2.5rem;">
				<div id="loadingdi_huifu-s"><img src="../i/footer_progress.png" /></div>
			</div>
		</div>
		<!-- 回复结束 -->
		{{ } }}
	</script>
	<!-- 回复列表模板 -->
	<script id="sx-list-huifu" type="text/x-dot-template">
		{{ for(var i=0,it=it.data; i < it.length; i++) { }}
		<div class="content animated fadeInDown" id="huifu-id-{{= it[i].id}}">
			<img class="userimg" suxiangw-src="{{= it[i].user.img ? _img(it[i].user.img,'60',60) : '../i///qiniu.test.live.hqtuite.cn../i/ibo/touxiang.png'}}" src="../i/touxiang.png" tapmode onclick="_u({{= it[i].uid}})" />
			<div class="username" tapmode onclick="_u({{= it[i].uid}})">
				{{= it[i].user.username }}
			</div>
			<div class="text">
				{{? it[i].huifu_uid }}
				<div class="user-huifu">回复<b tapmode onclick="_u({{= it[i].huifu_uid}})">{{= it[i].huifu_user.username }}</b>:</div>
				{{?}}
				<span style="padding-right: 0.5rem;" class="_text" tapmode onclick="setPlaceholder({{= it[i].ping_id}},'{{= it[i].user.username }}',{{= it[i].id}})">{{= _text(it[i].content) }}</span><span tapmode onclick="setPlaceholder({{= it[i].ping_id}},'{{= it[i].user.username }}',{{= it[i].id}})">{{= it[i].time }}</span>
			</div>
			<div class="zan" tapmode onclick="_zan({{= it[i].id}},2,'','article')" >
				<img src="../i/zan{{= it[i].user_zan?'-s':''}}.png" />
				<p>{{= it[i].zan_num ? it[i].zan_num : '' }}</p>
			</div>
		</div>
		{{ } }}
	</script>
	<!-- 回复模板结束 -->
</body>
<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var data_view,url,oxPlayer,ping_id,huifu_id;
	apiready = function() {
		// ulrs();
		$('.loading_by').css('height',api.frameHeight+'px')
		// return
		oxPlayer = api.require('oxPlayer');
		vid = api.pageParam['aid'] ? api.pageParam['aid'] : api.pageParam['id'];
		if(!vid){
			_alert('内容不存在或已删除',function(ret,err){
				_close();
			});
		}
		url = 'video/ping/_name/article/vid/'+vid;
		_user = _getPrefs('_user');

		UIChatBox = api.require('UIChatBox');
		UIChatBox.addEventListener({
				target: 'inputBar',
				name: 'move'
		}, function(ret, err) {
				if (ret) {
						if(ret.panelHeight){

						}else{
							UIChatBox.setPlaceholder({
								placeholder: '有爱评论，说点儿好听的 ~'
							});
						}
				} else {
						console.log("move"+JSON.stringify(err));
				}
		});

		view();
		_shangla(function(){
			view();
		},1)
		// 监听滚动
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: api.winHeight / 2
			}
		}, function(ret, err) {
			if (heigutgao == 1) {
				pagenum += 1
				_list({
					url: url,
					page: pagenum
				});
			}
		});
		// 回到屏幕
		api.addEventListener({
			name: 'viewappear'
		}, function(ret, err) {
		});
		// 离开屏幕
		api.addEventListener({
			name: 'viewdisappear'
		}, function(ret, err) {
			oxPlayer.pause();
		});
		//应用进入后台事件
		api.addEventListener({
			name: 'pause'
		}, function(ret, err) {
		});
		// 应用从后台回到前台事件
		api.addEventListener({
			name: 'resume'
		}, function(ret, err) {
			oxPlayer.pause();
		});
	}
	function view() {
		_ajax('article/view/id/' + vid, function(ret, err) {
			if (ret) {
				//  console.log(JSON.stringify(ret))
				//渲染模版
				var evalData = doT.template($api.html($api.byId('sx-view-list')));
				$api.html($api.byId('sx-view-view'), evalData(ret));
				data_view = ret;

				open();
				api.execScript({
				    script: '$(".aui-title").text("'+ret.user.username+'")'
				});

				//  console.log(evalData(ret))

				if(data_view.channel == 2){
					api.imageCache({
							url: _img(data_view.img,api.winWidth+200,api.winWidth),
							thumbnail: false
					}, function(r, e) {
							if (r) {
									if (!r.status) {
											r.url = _img(data_view.img,api.winWidth+200,api.winWidth);
									}
									data_view.img_cache = r.url;
									$('#video_img').attr("src", r.url);
									setTimeout(function(){
										video();
									},300)
							}
					});
				}else{
					_imageCache();
				}
				_list({
					url: url
				});
				if(api.pageParam['gundong']){
					setTimeout(function(){
						gundong();
					},500)
				}
			} else {
				_alert('内容不存在或已删除',function(ret,err){
					_close();
				});
			}
		})
	}
	// 播放视频
	function video() {
		// console.log(data_view.data)
		var x = $('.video .aui-card-list-content-padded .aui-row img').offset().left;
		var y = $('.video .aui-card-list-content-padded .aui-row img').offset().top;
		var w = $('.video .aui-card-list-content-padded .aui-row img').width();
		var h = $('.video .aui-card-list-content-padded .aui-row img').height();
		var url = _sx_qiniu + data_view.data;
		var img = _img(data_view.img,api.winWidth+200,api.winWidth);
		_video_open({url:url,img:img,w:w,h:h,y:y,x:x,radius:8,fixed:true,autoPlay:true});
		setTimeout(function(){
			var oxPlayer = api.require('oxPlayer');
			oxPlayer.start();
		},300)
	}
	// 图片浏览
	function img(index) {
		// console.log(JSON.stringify(data_view.images));
		_image({
			list: data_view.images,
			index: index
		})
	}
	function open() {
		var color = api.systemType=='ios'?'#000':'#707070';
		var color2 = api.systemType=='ios'?'#111':'#959595';
		UIChatBox.open({
			placeholder: '有爱评论，说点儿好听的 ~',
			// placeholderColor:'#000',
			maxRows: 4,
			emotionPath: _i + 'UIChatBox/emotion',
			styles: {
				inputBar: {
					borderColor: color,
					bgColor: color,
					textColor: '#fff'
				},
				inputBox: {
					borderColor: color2,
					bgColor: color2
				},
				emotionBtn: {
					normalImg: _i + 'UIChatBox/emotionBtn.png'
				},
				keyboardBtn: {                      //JSON对象；键盘按钮样式
						normalImg:  _i + 'UIChatBox/keyboardBtn.png'
				},
				recordBtn: {
					normalBg: '#c4c4c4',
					activeBg: '#999999',
					color: color,
					size: 14
				},
				indicator: {
					target: 'both',
					color: '#c4c4c4',
					activeColor: '#9e9e9e'
				},
				sendBtn: {
					titleColor: '#fff',
					bg: '#555',
					activeBg: '#46a91e',
					titleSize: 14
				}
			}
		}, function(ret, err) {
			if (ret) {
				// console.log(JSON.stringify(ret));
				// 模块打开成功
				if(ret.eventType == 'show'){

				}
				// 发布内容
				if(ret.eventType == 'send'){
					if(!_getPrefs('_user')){
						UIChatBox.closeKeyboard();
						UIChatBox.closeBoard();
						return _login();
					}
					if(ret.msg){
						ping_add(ret.msg);
					}else{
						return _msg('请填写评论哦！')
					}
				}
			} else {
				console.log(JSON.stringify(err));
			}
		});
	}
	// 发布评论
	//  ping_id没有值评论作者，有值表示回复评论，
	function ping_add(content){
		var url = 'member/ping/_name/article';
		if(ping_id){
			url = 'member/ping_huifu/_name/article';
		}
		_ajax(url,function(ret,err){
			UIChatBox.closeKeyboard();
			UIChatBox.closeBoard();
			if(ret){
				// console.log(JSON.stringify(ret));
				// 插入html评论和回复
				if(ping_id){
					// 	插入回复html
					huifu_html(ret.data);
				}else{
					//	插入评论html
					ping_html(ret.ret,content);
					// setTimeout(function(){
					// 	gundong();
					// },300)
				}

				if(ret.ret){
					// 回复成功后 重置为评论作者
					if(ping_id){
						ping_id = 0;
						huifu_id = 0;
						UIChatBox.setPlaceholder({
							placeholder: '有爱评论，说点儿好听的 ~'
						});
					}
				}else{
					_msg(ret.err);
				}
			}else{
				_alert(JSON.stringify(err));
			}
		},{vid:vid,content:content,ping_id:ping_id,huifu_id:huifu_id});
	}
	// 插入评论html模板
	function ping_html(id,content){

		var data = {
			"user":{
				"username":_user.username,
				"id":_user.id,
				"img":_user.img
			},
			"uid":_user.id,
			"content":_text(content),
			"id":id,
			"vid":vid,
			"huifu_num":0,
			"time":'刚刚',
			"zan_num":0
		};
		var ret = {"data":[data]};
		//渲染模版
		var evalData = doT.template($api.html($api.byId('sx-list')));
		$api.prepend($api.byId('sx-view'), evalData(ret));
		api.parseTapmode();
		_imageCache();
		_zhen();
		setTimeout(function(){
			gundong();
		},300)
		// api.pageUp({top:true});
	}
	// 插入回复html模板
	function huifu_html(data){
		var ret = {"data":[data]};
		// console.log("huifu_html:"+JSON.stringify(ret));
		//渲染模版
		var evalData = doT.template($api.html($api.byId('sx-list-huifu')));
		$api.prepend($api.byId('sx-view-huifu-'+data.ping_id), evalData(ret));
		_imageCache()
		// 显示收起

		var _this = $api.dom('#huifu-'+ping_id+' .l b');
		var num = parseInt($api.attr(_this,'data-num'));

		if(num){
		}else{
			$api.removeAttr($api.dom('#huifu-'+data.ping_id), 'style');
			ping_huifu_hide(data.ping_id);
		}
		num = num+1;
		$api.attr(_this,'data-num',num)
		$api.text(_this,num);

		api.parseTapmode();
		_zhen();
	}

	// 回复评论的输入框
	function setPlaceholder(id,username,hid){
		ping_id = id;		// 评论id
		huifu_id = hid;	// 回复id
		UIChatBox.setPlaceholder({
				placeholder: '回复@'+username
		});
		UIChatBox.popupKeyboard();
	}
	// 加载回复列表
	// ping_id 评论id
	function ping_huifu_ajax(ping_id){
		// 显示加载
		ping_huifu_loading(ping_id);
		var page = parseInt($api.attr($api.byId('huifu-'+ping_id),'data-page'));
		_ajax('video/ping_huifu/_name/article?page='+page,function(ret,err){
			if(ret){
			//	console.log(JSON.stringify(ret));
				// 移除现有重复回复内容
				for (var i = 0; i < ret.data.length; i++) {
					$api.remove($api.dom('#huifu-id-'+ret.data[i].id));
				}
				// 移除结束
				//渲染模版
				var evalData = doT.template($api.html($api.byId('sx-list-huifu')));
				$api.append($api.byId('sx-view-huifu-'+ping_id), evalData(ret));
				_imageCache();
				// 显示展开数量
				var num = ret.total - (ret.per_page*ret.current_page);
				$api.text($api.dom('#huifu-'+ping_id+' .l b'),num);
				$api.attr($api.dom('#huifu-'+ping_id+' .l b'),'data-num',ret.total);
				if(page >= ret.last_page){
					// 加载最后一页，显示收起
					ping_huifu_hide(ping_id);
					// 分页变量重置
					page = 0;
				}else{
					// 没加载最后一页，显示展开
					ping_huifu_show(ping_id);
				}
				$api.attr($api.byId('huifu-'+ping_id),'data-page',page+1);
				api.parseTapmode();
			//	console.log("page:"+page +" last_page:"+ret.last_page);
			}else{
				_alert(JSON.stringify(err));
			}
		},{ping_id:ping_id})
	}
	// 显示图标
	function ping_huifu_show(ping_id,html){
		if(html){
			$api.html($api.byId('sx-view-huifu-'+ping_id), '');
		}
		$api.removeCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
		$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
		$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
	}
	// 显示收起
	function ping_huifu_hide(ping_id){

		$api.addCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
		$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-hide');

		$api.addCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
		$api.removeCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-show');

		$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');

		// 显示展开数量
		var _this = $api.dom('#huifu-'+ping_id+' .l b');
		var num = parseInt($api.attr(_this,'data-num'));
		$api.text(_this,num);



	//	$api.removeCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
	}
	// 显示加载
	function ping_huifu_loading(ping_id){
		$api.addCls($api.dom('#huifu-'+ping_id+' .b'), 'aui-show');
		$api.addCls($api.dom('#huifu-'+ping_id+' .l'), 'aui-hide');
		$api.removeCls($api.dom('#huifu-'+ping_id+' .r'), 'aui-show');
	}
	// 举报
	function jubao(id){
		var b = ['低俗', '政治敏感','违法犯罪','广告营销','侮辱谩骂','未成年人不当行为','引人反感不适','其他'];
		api.actionSheet({
				title: '请选择举报内容',
				cancelTitle: '取消',
				buttons: b
		}, function(ret, err) {
				var index = ret.buttonIndex;
				if(index == b.length){
					api.prompt({
						buttons: ['确定', '取消'],
						title:'描述举报理由（250字内）'
				}, function(ret, err) {
						var index = ret.buttonIndex;
						var text = ret.text;
						if(index == 1){
							if(text){
								jubao_ajax(id)
							}else{
								_alert('内容不能为空')
							}
						}
				});
				}else if(index != b.length+1){
					jubao_ajax(id)
				}
		});
	}
	function jubao_ajax(id){
		$('#ping-id-'+id).remove();
		_msg('举报成功');
		_setPrefs('ping'+id,id);
	}
	// 滚动指定位置
	function gundong(){
		window.scrollTo({
				top: $('.sx-ping-list').offset().top,
				behavior: "smooth"
		});
	}

</script>

</html>
